<template>
  <div>
    <layout>
      <!-- Page Header -->
      <header
        class="masthead"
        :style="{backgroundImage: `url(${GRIDSOME_API_URL + general.cover.url})`}"
      >
        <div class="overlay"></div>
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
              <div class="site-heading">
                <h1>{{general.title}}</h1>
                <span class="subheading">{{general.subTitle}}</span>
              </div>
            </div>
          </div>
        </div>
      </header>
      <!-- Main Content -->
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-preview" v-for="edge in $page.posts.edges" :key="edge.node.id">
              <g-link :to="'/post/' + edge.node.id">
                <h2 class="post-title">{{edge.node.title}}</h2>
                <!-- <h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3> -->
              </g-link>
              <p class="post-meta">
                Posted
                <!-- by <a href="#">Start Bootstrap</a> -->
                on {{edge.node.created_at}}
              </p>
              <p>
                <g-link
                  style="margin-right:10px"
                  :to="`/tag/${tag.id}`"
                  v-for="tag in edge.node.tags"
                  :key="tag.id"
                >{{tag.title}}</g-link>
              </p>
              <hr />
            </div>

            <!-- Pager -->
            <!-- 讲一遍：帮一些参数 -->
            <!-- 做一遍： -->
            <Pager :info="$page.posts.pageInfo"></Pager>
            <!-- <div class="clearfix">
              <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
            </div>-->
          </div>
        </div>
      </div>
    </layout>
  </div>
</template>
<page-query>

# 参数Int别名
query($page:Int) {
  general: allStrapiGeneral{
    edges{
      node{
        id
        title
        subTitle
        cover{
          url
        }
      }
    }
  }
  # 别名
  # 指令：@paginate
posts: allStrapiPosts (perPage:3,page:$page) @paginate{
pageInfo{
        totalPages
        currentPage
    }
edges{
  node{
		id
    title
    content
    created_at
    tags{
      id
      title
    }
}
}
}
}
</page-query> 
<script>
// 对应节点 提供模板
import { Pager } from 'gridsome'
export default {
  components: {
    Pager
  },
  computed: {
    general() {
      return this.$page.general.edges[0].node
    }
  },
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

<style>
</style>
